<style lang="less">
@import '../../../styles/common.less';
</style>
<template>
  <Card style="height:900px">
    <Layout>
      <Card>
        <header>
          <span style="vertical-align:middle">资金方:</span>
          <Select v-model="fundCode" class="v-select-wrapper" style="width:130px">
            <Option v-for="item in fundList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <span style="vertical-align:middle;margin-left: 10px;">产品:</span>
          <Select v-model="productCode" class="v-select-wrapper" style="width:150px">
            <Option v-for="item in productList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <span style="vertical-align:middle;margin-left: 10px;">交易时间:</span>
          <Date-picker type="date" v-model="startDate" format="yyyy年MM月dd日" style="width:130px"></Date-picker>-
          <Date-picker type="date" v-model="endDate" placement="bottom-end" format="yyyy年MM月dd日" style="width:130px"></Date-picker>
          <span style="vertical-align:middle;margin-left: 10px;">客户姓名:</span>
          <Input v-model="custName" style="width:130px" />
          <span style="vertical-align:middle;margin-left: 10px;">身份证:</span>
          <Input v-model="custCardNo" style="width:130px" />
          <span style="vertical-align:middle;margin-left: 10px;">状态:</span>
          <Select v-model="status" class="v-select-wrapper" style="width:130px">
            <Option v-for="item in paymentStatusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <Button type="primary" @click="query" style="margin-left: 10px;">查询</Button>
          <form method="get" id="download" action="" style="display:inline-block">
            <input name="fundCode" v-model="fundCode" style="display:none"/>
            <input name="productCode" v-model="productCode" style="display:none"/>
            <input name="startDate" v-model="startDate" style="display:none"/>
            <input name="endDate" v-model="endDate" style="display:none"/>
            <input name="custName" v-model="custName" style="display:none"/>
            <input name="custCardNo" v-model="custCardNo" style="display:none"/>
            <input name="status" v-model="status" style="display:none"/>
            <Button type="primary" @click="download" style="margin-left: 10px;">下载</Button>
          </form>
            <Button type="primary" @click="monthGather" style="margin-left: 10px;">月汇总</Button>
        <Modal v-model="turnOut" title="请输入代扣日期" @on-ok="monthDowmload"  :mask-closable="false" :footer-hide="false" width="420" ok-text="下载">
            <form method="get" id="monthDowmload" action="" style="display:inline-block;width:400px">
              <Row type="flex" align="middle">
              <Col span="5" style="text-align:center">代扣日期:</Col>
              <Col span="6" style="text-align:center"><Date-picker type="date" v-model="startTime" format="yyyy年MM月dd日" style="width:130px"></Date-picker><input name="startTime" style="width:105px;display:none" v-model="startTime"/></Col>
              <Col span="8" style="text-align:center">至</Col>
              <Col span="5" style="text-align:center"><Date-picker type="date" v-model="endTime" placement="bottom-end" format="yyyy年MM月dd日" style="width:130px"></Date-picker><input name="endTime" style="width:105px;display:none" v-model="endTime"/></Col>
          </Row>
          </form>
        </Modal>
        </header>
      </Card>
      <Card>
        <Table border :columns="orderColumns" :data="data1" style="width: 100%;"></Table>
        <div style="margin-top: 36px;text-align: center;">
          <Page :total="totalNum" :current="currentPage" :page-size="pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
        </div>
      </Card>
    </Layout>
  </Card>
</template>

<script>
export default {
  name: 'mutative-router',
  data () {
    return {
      startTime: null,
      endTime: null,
      turnOut: false,
      custName: '',
      custCardNo: '',
      startDate: null,
      endDate: null,
      status: '',
      productCode: '',
      fundCode: '',
      totalNum: 0,
      currentPage: 1,
      pageSize: 10,
      productList: [],

      fundList: [],
      amountAct: 0,
      paymentStatusList: [
        {
          value: '',
          label: '请选择'
        },
        {
          value: 'D0',
          label: '状态初始化'
        },
        {
          value: 'D1',
          label: '代扣成功'
        },
        {
          value: 'D2',
          label: '代扣失败'
        },
        {
          value: 'D10',
          label: '未确定'
        }
      ],

      orderColumns: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          width: 50,
          className: 'tbake'
        },
        {
          title: '资金方',
          key: 'fundName',
          align: 'center',
          width: 80,
          className: 'tbake'
        },
        {
          title: '产品',
          key: 'productName',
          align: 'center',
          width: 80,
          className: 'tbake'
        },
        {
          title: '客户姓名',
          key: 'custName',
          align: 'center',
          width: 80,
          className: 'tbake'
        },
        {
          title: '身份证号',
          key: 'custCardNo',
          align: 'center',
          width: 150,
          className: 'tbake'
        },
        {
          title: '响应订单号',
          key: 'rtnOrderNo',
          align: 'center',
          width: 150,
          className: 'tbake'
        },
        {
          title: '合同金额',
          key: 'principalAmtAct',
          align: 'center',
          width: 80,
          className: 'tbake'
        },
        {
          title: '管理费费率',
          key: 'consultingFeeRate',
          width: 80,
          className: 'tbake',
          align: 'center'
        },
        {
          title: '管理费金额',
          key: 'consultingFee',
          width: 80,
          className: 'tbake',
          align: 'center'
        },
        {
          title: '交易时间',
          key: 'updatedDate',
          align: 'center',
          width: 150,
          className: 'tbake',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.formatTime(params.row.updatedDate))
            ])
          }
        },
        {
          title: '批次',
          key: 'payIndex',
          align: 'center',
          width: 80,
          className: 'tbake'
        },
        {
          title: '代扣金额',
          key: 'amount',
          align: 'center',
          width: 80,
          className: 'tbake'
        },
        {
          title: '成功金额',
          key: 'amountAct',
          align: 'center',
          width: 80,
          className: 'tbake'
        },
        {
          title: '通道',
          key: 'reqChannel',
          align: 'center',
          width: 80,
          className: 'tbake'
        },
        {
          title: '状态',
          key: 'status',
          align: 'center',
          width: 80,
          className: 'tbake',
          render: (h, params) => {
            return h('div', [
              params.row.status === 'D2' && h('span', '代扣失败'),
              params.row.status === 'D1' && h('span', '代扣成功'),
              params.row.status === 'D4' && h('span', '代扣失效'),
              params.row.status === 'D0' && h('span', '代扣初始化'),
              params.row.status === 'D10' && h('span', '未确定')
            ])
          }
        },
        {
          title: '失败原因',
          key: 'rtnResponseMsg',
          align: 'center',
          width: 150,
          className: 'tbake'
        },
        {
          title: '扣款订单号',
          key: 'rtnResponseCode',
          align: 'center',
          width: 160,
          className: 'tbake'
        },
        {
          title: '操作',
          key: 'operation',
          align: 'center',
          render: (h, param) => {
            var vm = this
            return h('div', [
              param.row.status === 'D2' &&
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      var dto = vm.data1[param.index]
                      this.$ajax
                        .post(
                          this.$appContext.marvels_core_financial +
                          'financial/mcfe/service/reWithholding',
                          {
                            id: dto.id,
                            status: dto.status
                          }
                        )
                        .then(re => {
                          if (re.data.code === 'success') {
                            this.$Message.success(re.data.data)
                          } else {
                            this.$Message.warning(re.data.data)
                          }
                          vm.queryDetail()
                        })
                        .catch(er => { })
                    }
                  }
                },
                '重发代扣'
              ),
              (param.row.status === 'D0' ||
                param.row.status === 'D2') &&
              h(
                'Button',
                {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        render: h => {
                          return h('Input', {
                            props: {
                              value: this.value,
                              autofocus: true,
                              placeholder: '请输入金额'
                            },
                            on: {
                              input: val => {
                                this.amountAct = val
                              }
                            }
                          })
                        },
                        onOk () {
                          var dto = vm.data1[param.index]
                          if (dto.amount + '' !== vm.amountAct + '') {
                            vm.$Message.warning('输入金额和应还金额不一致')
                            vm.amountAct = ''
                            return
                          }
                          vm.$ajax
                            .post(
                              this.$appContext.marvels_core_financial +
                              'financial/mcfe/service/manualLoanWithholding',
                              {
                                id: dto.id,
                                amountAct: vm.amountAct
                              }
                            )
                            .then(re => {
                              vm.amountAct = ''
                              if (re.data.code === 'success') {
                                vm.$Message.success(re.data.data)
                              } else {
                                vm.$Message.warning(re.data.data)
                              }
                              vm.queryDetail()
                            })
                            .catch(er => { })
                        }
                      })
                    }
                  }
                },
                '人工收取'
              ),
              param.row.status === 'D10' &&
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      var dto = vm.data1[param.index]
                      this.$ajax
                        .post(
                          this.$appContext.marvels_core_financial +
                          'financial/mcfe/service/reQueryWithholding',
                          {
                            id: dto.id
                          }
                        )
                        .then(re => {
                          if (re.data.code === 'success') {
                            this.$Message.success(re.data.data)
                          } else {
                            this.$Message.warning(re.data.data)
                          }
                          vm.queryDetail()
                        })
                        .catch(er => { })
                    }
                  }
                },
                '查询交易结果'
              )
            ])
          }
        }
      ],
      data1: []
    }
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },
  methods: {
    pageChange: function (pageNum) {
      var vm = this
      vm.currentPage = pageNum
      vm.queryDetail()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.pageSize = pageLength
      vm.queryDetail()
    },
    query () {
      var vm = this
      if (vm.startDate > vm.endDate && vm.endDate !== '') {
        this.$Message.warning('开始日期不能大于结束日期')
        return
      }
      this.queryDetail()
    },
    download () {
      var obt1 = document.getElementById('download')
      obt1.action = this.$appContext.marvels_core_financial + 'financial/mcfe/service/download/detailExcel'
      obt1.submit()
    },
    monthGather () {
      var vm = this
      vm.turnOut = true
    },
    monthDowmload () {
      var obt1 = document.getElementById('monthDowmload')
      obt1.action = this.$appContext.marvels_core_financial + 'financial/mcfe/service/download/monthDowmload'
      obt1.submit()
    },
    queryDetail () {
      var vm = this
      this.$ajax
        .post(
          this.$appContext.marvels_core_financial +
          'financial/mcfe/service/queryLoanWithholdingDetail',
          {
            productCode: vm.productCode,
            fundCode: vm.fundCode,
            startDate: vm.startDate,
            endDate: vm.endDate,
            custName: vm.custName,
            custCardNo: vm.custCardNo,
            status: vm.status,
            currentPage: vm.currentPage,
            pageSize: vm.pageSize
          }
        )
        .then(re => {
          this.data1 = re.data.data.list
          this.totalNum = re.data.data.total
        })
        .catch(er => { })
    }
  },
  created () {
    this.$ajax = this.$util.ajax()
    var vm = this
    var tmpDate = new Date()
    var tmpEndDate = new Date()
    tmpEndDate.setDate(tmpEndDate.getDate() + 1)
    vm.endDate = tmpEndDate
    tmpDate.setMonth(tmpDate.getMonth() - 1)
    vm.startDate = tmpDate
    this.queryDetail()
    // 查询资金源
    vm.fundList.push({
      value: '',
      label: '请选择'
    })
    this.$ajax
      .post(
        this.$appContext.marvels_core_financial + 'financial/fund/service/list',
        {}
      )
      .then(re => {
        var allData = re.data.data

        for (var i = 0; i < allData.length; i++) {
          vm.fundList.push({
            value: allData[i].fundCode,
            label: allData[i].fundName
          })
        }
      })
      .catch(er => { })
    // 查询产品小类
    vm.productList.push({
      value: '',
      label: '请选择'
    })
    this.$ajax
      .post(
        this.$appContext.marvels_core_product +
        'product/mcpt/service/searchByVersion',
        {}
      )
      .then(re => {
        var allData = re.data.data
        for (var i = 0; i < allData.length; i++) {
          vm.productList.push({
            value: allData[i].productCode,
            label: allData[i].productName
          })
        }
      })
      .catch(er => { })
  }
}
</script>
<style lang="less">
.tbake .ivu-table-cell{
  padding-left: 2px;
  padding-right: 2px;
}
</style>
